<template>
	<view class="root">
		<!-- <view class="header">
			<view class="back-btn" @click="go_back">
				<up-icon name="arrow-left" color="#333333" bold size="38rpx"></up-icon>
			</view>
		</view> -->
		<up-form labelPosition="left" :labelStyle="lableStyle" :model="model" :rules="rules" ref="form">

			<view style="padding: 0 40rpx; display: flex;">
				<up-form-item prop="name" label="姓名">
					<up-input :customStyle="inputStyle" placeholder="请输入姓名" v-model="model.name"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item label="性别" prop="gender">
					<view class="selectInput" @click="showGender = true">
						<!-- <up-icon name="list" color="#999" size="28rpx" bold></up-icon> -->
						<text style="color:#999;" v-if="model.gender === ''">选择性别</text>
						<text v-else>{{ model.gender==1?'男':'女' }}</text>
					</view>
				</up-form-item>
			</view>
			<view style="padding: 0 40rpx; margin-bottom: 50rpx;">
				<up-form-item labelWidth="160rpx" prop="birthdate" label="出生日期">
					<view class="selectInput" @click="showBirthday = true">
						<!-- <up-icon name="list" color="#999" size="28rpx" bold></up-icon> -->
						<text style="color:#999;" v-if="model.birthdate === ''">选择出生日期</text>
						<text v-else>{{ model.birthdate }}</text>
					</view>
				</up-form-item>
			</view>
			<view class="title">
				<text>近视度数</text>
				<text style="font-size: 21rpx;">（球镜/S）</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="sphericalLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.sphericalLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="sphericalRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.sphericalRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>散光度数</text>
				<text style="font-size: 21rpx;">（柱镜/S）</text>·
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="cylindricalLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.cylindricalLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="cylindricalRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.cylindricalRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>轴位</text>
				<text style="font-size: 21rpx;">（A）</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="axisLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.axisLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="axisRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.axisRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>视力矫正</text>
				<text style="font-size: 21rpx;">（CC）</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="ccVaLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.ccVaLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="ccVaRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.ccVaRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>裸眼视力</text>
				<text style="font-size: 21rpx;">（SC）</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="scVaLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.scVaLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="scVaRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.scVaRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>眼轴长度</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="axialLengthLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.axialLengthLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="axialLengthRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.axialLengthRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view class="title">
				<text>角膜曲率</text>
			</view>
			<view style="padding: 0 40rpx; display: flex; margin-bottom: 22rpx;">
				<up-form-item prop="keratometryLeft" label="左眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.keratometryLeft"
						border="none"></up-input>
				</up-form-item>
				<view style="width: 80rpx;"></view>
				<up-form-item prop="keratometryRight" label="右眼">
					<up-input type="number" :customStyle="inputStyle" placeholder="请输入" v-model.number="model.keratometryRight"
						border="none"></up-input>
				</up-form-item>
			</view>
			<view style="padding: 0 40rpx; ">
				<up-form-item label="斜视">
					<up-radio-group activeColor="#0A9647" v-model="model.strabismus">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="视弱">
					<up-radio-group activeColor="#0A9647" v-model="model.visualField">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item labelWidth="180rpx" label="眼科手术史">
					<up-radio-group activeColor="#0A9647" v-model="model.eyeSurgeryHistory">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item labelWidth="180rpx" label="药物过敏史">
					<up-radio-group activeColor="#0A9647" v-model="model.drugAllergyHistory">
						<up-radio :customStyle="{marginRight: '10rpx'}" v-for="(item, index) in strabismusList"
							:key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>
			</view>
		</up-form>
		<view class="footer margin-bottom-21">
			<text style="margin-right: 11rpx;font-size: 50rpx;vertical-align: middle;">“</text>
			<text>爱护眼睛，让生命的阳光更精彩。</text>
		</view>

		<view class="startbtn" @click="sub">
			<text>开启您的专属护眼课程吧</text>
			<view class="icon">
				<view class="arrow"></view>
			</view>
		</view>
	</view>

	<up-action-sheet :show="showGender" @select="sexSelect" title="请选择性别" @close="showGender = false"
		:actions="genderList"></up-action-sheet>
	<up-datetime-picker v-model="maxTime" :minDate="minDate" :maxDate="maxDate" :show="showBirthday" hasInput mode="date" @confirm="birthdayConfirm"
		@cancel="birthdayClose" @close="birthdayClose"></up-datetime-picker>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		test,
		toast,
		timeFormat
	} from '@/node_modules/uview-plus'
	import {createExamination} from '@/api/index.js'
	onLoad((options) => {

	})
	const maxTime = Date.now()
	const maxDate = ref(maxTime)
    const minDate = ref(0)
	const inputStyle = ref({
		backgroundColor: '#F5F5F5',
		padding: '8rpx'
	})
	const lableStyle = ref({
		fontWeight: '700',
		fontSize: '32rpx'
	})
	const model = ref({
		name: '',
		gender: '',
		birthdate: '',
		sphericalLeft: '',
		sphericalRight: '',
		axisLeft: '',
		axisRight: '',
		ccVaLeft: '',
		ccVaRight: '',
		scVaLeft: '',
		scVaRight: '',
		axialLengthLeft: '',
		axialLengthRight: '',
		keratometryLeft: '',
		keratometryRight: '',
		strabismus: false,
		visualField: false,
		eyeSurgeryHistory: false,
		drugAllergyHistory: false

	})

	const rules = ref({
		'name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		'gender': {
			required: true,
			message: '请选择性别',
			trigger: ['blur', 'change'],
		},
		'birthdate': {
			required: true,
			message: '出生日期不可为空',
			trigger: ['blur', 'change'],
		},
		'sphericalLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'cylindricalLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'cylindricalRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'sphericalRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axisLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axisRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'ccVaLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'ccVaRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'scVaLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'scVaRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axialLengthLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'axialLengthRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'keratometryLeft': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
		'keratometryRight': {
			type: "number",
			required: true,
			message: '不可为空',
			trigger: ['blur', 'change'],
		},
	})
	
	
	
	const showGender = ref(false)
	const genderList = ref([{
			id: '1',
			name: '男'
		},
		{
			id: '2',
			name: '女'
		}
	])
	const form = ref()

	function sexSelect(e) {
		model.value.gender = e.id;
		if (form.value) {
			form.value.validateField('model.gender');
		}
	}

	const showBirthday = ref(false)

	function birthdayClose() {
		showBirthday.value = false
		form.value.validateField('userInfo.birthdate')
	}

	function birthdayConfirm(e) {
		showBirthday.value = false
		model.value.birthdate = timeFormat(e.value, 'yyyy-mm-dd')
		form.value.validateField('userInfo.birthdate')
	}

	const strabismusList = ref([{
		name: '是',
		value: true
	}, {
		name: '否',
		value: false
	}])

	const go_back = () => {
		uni.navigateBack({
			delta: 1
		})
	}

	const sub = () => {
		form.value.validate().then(res => {
 			createExamination(
				model.value,
			).then(res => {
				console.log(res);
				if(res.code === 200) {
					toast('保存成功');
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/main/index'
						})
					},1500)
				}
			})
		}).catch(errors => {
			toast('请完善表单')
		})
	}
</script>
<style lang="less" scoped>
	.selectInput {
		flex: 1;
		height: 65rpx;
		min-width: 219rpx;
		line-height: 65rpx;
		position: relative;
		background-color: #F5F5F5;
		border-radius: 14rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 300;
		font-size: 28rpx;
		color: #000000;
		position: relative;

		:deep(.u-icon__icon) {
			position: absolute;
			right: 18rpx;
			top: 0;
			bottom: 0;
		}
	}

	.margin-bottom-21 {
		margin-bottom: 21rpx;
	}

	.margin-bottom-35 {
		margin-bottom: 35rpx;
	}

	.margin-bottom-86 {
		margin-bottom: 86rpx;
	}

	.margin-bottom-95 {
		margin-bottom: 95rpx;
	}

	.margin-bottom-114 {
		margin-bottom: 114rpx;
	}

	.root {
		min-height: 100vh;
		background-color: #fff;
		padding-top: 93rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.header {
			padding-left: 42rpx;
			margin-bottom: 79rpx;

			.back-btn {
				width: 123rpx;
				height: 123rpx;
				background: #F5F5F5;
				border-radius: 50%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}

		.tow-column {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx 0 42rpx;

			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 23rpx;

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #000000;
					letter-spacing: 2rpx;
				}

				.input {
					width: 219rpx;
					position: relative;

					input {
						width: 100%;
						height: 70rpx;
						background-color: #F5F5F5;
						border-radius: 14rpx;
						padding: 0 26rpx;
						box-sizing: border-box;
						font-family: PingFangSC, PingFang SC;
						font-weight: 300;
						font-size: 32rpx;
						color: #000000;
					}
				}

				.selectInput {
					width: 219rpx;
					height: 70rpx;
					line-height: 70rpx;
					position: relative;
					background-color: #F5F5F5;
					border-radius: 14rpx;
					padding: 0 26rpx;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 300;
					font-size: 32rpx;
					color: #000000;
					position: relative;

					:deep(.u-icon__icon) {
						position: absolute;
						right: 18rpx;
						top: 0;
						bottom: 0;
					}
				}
			}
		}

		.one-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			column-gap: 16rpx;
			padding: 0 32rpx 0 42rpx;

			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				letter-spacing: 2rpx;
			}

			.longSelect {
				flex: 1;
				height: 70rpx;
				line-height: 70rpx;
				background: #F5F5F5;
				border-radius: 14rpx;
				position: relative;

				:deep(.u-icon__icon) {
					position: absolute;
					right: 18rpx;
					top: 0;
					bottom: 0;
				}
			}
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 42rpx;
			color: #000000;
			letter-spacing: 2rpx;
			padding: 0 37rpx;
		}

		.checkBox {
			padding: 0 42rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				margin-right: 19rpx;
			}

			.item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 5rpx;

				.circle {
					width: 32rpx;
					height: 32rpx;
					border: 2rpx solid #B8B6B6;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					border-radius: 50%;

					.isselect {
						width: 21rpx;
						height: 21rpx;
						background-color: #0A9647;
						border-radius: 50%;
					}
				}
			}
		}

		.footer {
			width: 666rpx;
			margin: 0 auto;
			margin-top: 90rpx;
			text-align: right;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 21rpx;
			color: #0A9647;
		}

		.startbtn {
			width: 666rpx;
			padding: 40rpx 47rpx 39rpx 40rpx;
			box-sizing: border-box;
			margin: 0 auto;
			background: #0A9647;
			border-radius: 35rpx;
			color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.icon {
				width: 72rpx;
				height: 2rpx;
				background-color: #fff;
				position: relative;

				.arrow {
					width: 16rpx;
					height: 16rpx;
					background: linear-gradient(45deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto 0;
					transform: rotateZ(45deg);
				}
			}
		}
	}
</style>